<template>
    <div class="tongzhi">
        <Form ref="formValidate" :model="formValidate" :label-width="80" :rules="ruleValidate">
            <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;">
                <FormItem label="年级" prop="grade_id">
                    <Select v-model="formValidate.grade_id"  @on-change="eclassfun">
                        <Option  v-for="item in gradeList" :value="item.id" :key="item.id">{{item.grade_name}}</Option>            
                    </Select>
                </FormItem>
                <FormItem label="班级" prop="eclass_id">
                    <Select v-model="formValidate.eclass_id"  multiple>
                        <Option  v-for="item in eclassList" :value="item.eclass_id" :key="item.eclass_id">{{item.eclass_name.zh?item.eclass_name.zh:item.eclass_name.mn}}</Option>            
                    </Select>
                </FormItem>
                <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
            </div>
            <FormItem label="选择要导出的内容" style="width:100%;">
                <CheckboxGroup v-model="formValidate.title">
                    <Checkbox label="student_name" disabled>
                        姓名
                    </Checkbox>
                    <Checkbox label="ehnic_id">
                        民族
                    </Checkbox>
                    <Checkbox label="picture">
                        头像
                    </Checkbox>
                    <Checkbox label="student_learncode">
                        学生学号
                    </Checkbox>
                    <Checkbox label="identityard_num">
                        身份证号
                    </Checkbox>
                    <Checkbox label="country">
                        国际
                    </Checkbox>
                    <Checkbox label="hkmtb">
                        港澳台侨
                    </Checkbox>
                    <Checkbox label="sex">
                        性别
                    </Checkbox>
                    <Checkbox label="birthday">
                        出生日期
                    </Checkbox>
                    <Checkbox label="native_id">
                        籍贯-省份
                    </Checkbox>
                    <Checkbox label="native_city_id">
                        籍贯-市
                    </Checkbox>
                    <Checkbox label="native_county_id">
                        籍贯-县城
                    </Checkbox>
                    <Checkbox label="birth_id">
                        出生地-省份
                    </Checkbox>
                    <Checkbox label="birth_city_id">
                       出生地-市 
                    </Checkbox>
                    <Checkbox label="birth_county_id">
                        出生地-县城
                    </Checkbox>
                    <Checkbox label="health_id">
                        健康状况
                    </Checkbox>
                    <Checkbox label="political_id">
                        政治面貌
                    </Checkbox>
                    <Checkbox label="student_number">
                        学籍号
                    </Checkbox>
                    
                </CheckboxGroup>
            </FormItem>
    
            <FormItem>
                <a href="" class="prompt">已确保您的浏览器已信任本网页</a>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
    
                <Button type="ghost" style="margin-left: 8px" @click="handleReset('formValidate')">重置</Button>
            </FormItem>
            <div style="clear:both"></div>
        </Form>
    
    </div>
</template>

<script>
    export default {
        data() {
            return {
                look: false,
                indeterminate: true,
                checkAll: false,
                user_id: null,
                condition: [],
                gradeList:[],
                eclassList:[],
                formValidate: {
                    grade_id:'',
                    eclass_id:[],
                    title: ['student_name',"eclass","grade"]
                },
                formItem: [],
    
                ruleValidate: {
                    condition: [{
                        type: "array",
                        min: 1,
                        required: true,
                        message: "请选择导出数据",
                        trigger: "change"
                    }],
                    grade_id:[{
                        type: "number",
                        required: true,
                        message: "请选择年级",
                        trigger: "change"
                    }],
                    eclass_id: [{
                        type: "array",
                        min: 1,
                        required: true,
                        message: "请选择班级",
                        trigger: "change"
                    }],
                }
            };
        },
        created(){
            this.grade()
        },
    
        methods: {
            grade(){
                this.$http.get('api/base/v1/get/all/arrives')
                .then(val=>{   
                    let arr = val.data.filter(item => item.grade_id)
                    this.gradeList = arr.map(item => {
                        let arr = {
                                id: item.grade_id,
                                grade_name:item.grade.grade_name.zh +'('+item.name.zh+')',
                            }
                        return arr
                    })             
                })
                .catch(err=>{
                    console.log(err);
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            },
            eclassfun(val){
                this.$http.get('api/eclass/v1/eclass/grade_eclass?grade_id='+val)
                .then(item=>{   
                       this.eclassList=item.data             
                })
                .catch(err=>{
                    console.log(err);
                    if(err.code && err.code==422) {
                        this.$Message.error(err.message);
                    }
                })
            },
            handleCheckAll() {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;
    
                if (this.checkAll) {
                    this.formValidate.title = [
                        "student_name",
                        "grade",
                        "eclass",
                        "ehnic_id",
                        "picture",
                        "student_learncode",
                        "identityard_num",
                        "country",
                        "hkmtb",
                        "sex",
                        "birthday",
                        "native_id",
                        "native_city_id",
                        "native_county_id",
                        "birth_id",
                        "birth_city_id",
                        "birth_county_id",
                        "health_id",
                        "political_id",
                        "student_number",
                        
                    ];
                } else {
                    this.formValidate.title = ["student_name","eclass","grade"];
                }
            },
            handleSubmit(name) {
                if(this.formValidate.eclass_id.length==0){
                    this.$Message.error('请选择班级');
                    return
                }
                let cond = [];
                this.$http.post("api/student/v1/out_excel/out_excel" , this.formValidate)
                    .then(val=>{   
                            window.open(val.data.url)
                            this.$emit("backList", true);          
                    })
                    .catch(err=>{
                        console.log(err);
                        if(err.code && err.code==422) {
                            this.$Message.error(err.message);
                        }
                    })
            },
    
            handleReset(name) {
                this.$refs[name].resetFields();
            }
        }
    };
</script>


